<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>关于我</title>
</head>
<body>
<!--导航栏 menu-->
<div th:replace="~{commons/common::menu(activeUrl = 'about.html')}"></div>

<!--中间部分-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">

        <div class="ui stackable grid">
            <!--左边图片-->
            <div class="eleven wide column">
                <div class="ui segment">
                    <img th:src="#{message.about.bg}" alt="" class="ui rounded image">
                </div>
            </div>
            <!--右边的关于我信息-->
            <div class="five wide column">
                <div class="ui segments">
                    <!--关于我-->
                    <div class="ui top attached segment">
                        <div class="ui header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p style="text-indent: 2em" th:text="#{message.about.info}"></p>
                    </div>
                    <!--个人标签-->
                    <div class="ui attached segment">
                        <div class="ui blue tag label m-margin-tb-tiny">
                            <span th:text="#{message.about.tag3}"></span>
                        </div>
                        <div class="ui red tag label m-margin-tb-tiny">
                            <span th:text="#{message.about.tag1}"></span>
                        </div>
                        <div class="ui orange tag label m-margin-tb-tiny">
                            <span th:text="#{message.about.tag2}"></span>
                        </div>
                        <div class="ui teal tag label m-margin-tb-tiny">
                            <span th:text="#{message.about.tag4}"></span>
                        </div>
                    </div>
                    <!--技术栈-->
                    <div class="ui attached segment">
                        <div class="ui mini labeled button m-margin-tb-tiny">
                            <div class="ui green button">
                                <span th:text="#{message.about.skill1}"></span>
                            </div>
                        </div>
                        <div class="ui mini labeled button m-margin-tb-tiny">
                            <div class="ui orange button">
                                <span th:text="#{message.about.skill2}"></span>
                            </div>
                        </div>
                        <div class="ui mini labeled button m-margin-tb-tiny">
                            <div class="ui blue button">
                                <span th:text="#{message.about.skill3}"></span>
                            </div>
                        </div>
                        <div class="ui mini labeled button m-margin-tb-tiny">
                            <div class="ui green button">
                                <span th:text="#{message.about.skill4}"></span>
                            </div>
                        </div>
                        <div class="ui mini labeled button m-margin-tb-tiny">
                            <div class="ui teal button">
                                <span th:text="#{message.about.skill5}"></span>
                            </div>
                        </div>
                    </div>
                    <!--联系方式-->
                    <div class="ui bottom attached segment">
                        <div class="ui circular icon button" onclick="goGitee()"><i class="github icon"></i></div>
                        <div class="ui circular icon button wechat"><i class="wechat icon"></i></div>
                        <div class="ui qq-tel circular icon button" data-content="1315480331"><i class="qq icon"></i>
                        </div>

                        <div class="ui wechat-qr flowing popup transition hidden">
                            <img th:src="@{images/wechat.jpg}" alt="" class="ui image" style="width: 160px;">
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>

<br>

<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>


<!-- 引用的 js-->
<th:block th:replace="~{commons/common::script}">
</th:block>

<script>
    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });


    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });

    /*关于我页面*/
    // 弹出QQ号
    $('.qq-tel').popup();

    // 弹出微信号
    $('.wechat').popup({
        popup: $('.wechat-qr')
    });

    function goGitee() {
        location.href = "https://gitee.com/sunzhongjie";
    }


</script>
</body>
</html>